import React from 'react'
import PropTypes from 'prop-types'
import { Form, Select, Input, Button,Switch,Checkbox, Row, Col,Table,Icon, Tag} from 'antd';
import styles from './List.less'
import classnames from 'classnames'
import { AnimTableBody } from '../../components'
import { DropOption } from '../../components'
const FormItem = Form.Item;
const Option = Select.Option;
const CheckboxGroup = Checkbox.Group;

class role extends React.Component {
	state = {
		combobox:[],
		mynameInput:'',
		checked: true,
		name:false,
	}
  render() {
  	const { onAdd,roleTitle, editdatarole, alluserlist,onClose,update} = this.props
  	const { getFieldDecorator } = this.props.form;
		let combobox=[]
  	const handleSubmit =()=>{
			if(roleTitle =='新增角色'){
				if(!this.state.name){
					let comboboxid =[]
					for(xin in alluserlist.rolePerMap){
						for(let i = 0;i<alluserlist.rolePerMap[xin].length;i++ ){
							for(let j = 0; j<combobox.length;j++){
								if(combobox[j] ==alluserlist.rolePerMap[xin][i].displayName ){
									comboboxid.push(alluserlist.rolePerMap[xin][i].permissionId)
								}
							}
						}
					}
					const data =  {
						roleEntry:{
							name:this.state.mynameInput,
							status:this.state.checked? 0 :1 ,
						},
						perId:comboboxid
					}
					localStorage.setItem("editNot",'true')
					onAdd(data)
				}else{
					this.setState({
						name:true
					})
				}
			}else{
				edit()
			}
	}
	const edit =()=>{
		if(!this.state.name && editdatarole.name.length>0){
			let comboboxid =[]
			for(xin in alluserlist.rolePerMap){
				for(let i = 0;i<alluserlist.rolePerMap[xin].length;i++ ){
					for(let j = 0; j<combobox.length;j++){
						if(combobox[j] ==alluserlist.rolePerMap[xin][i].displayName ){
							comboboxid.push(alluserlist.rolePerMap[xin][i].permissionId)
						}
					}
				}
			}
			const data =  {
				role:{
					name:this.state.mynameInput ==''?editdatarole.name:this.state.mynameInput,
					status:this.state.checked? 0 :1,
					id:editdatarole.id,
					type:editdatarole.type
				},
				perId:comboboxid
			}
			localStorage.setItem("editNot",'true')
			update(data)
		}else{
			this.setState({
				name:true
			})
		}
	}
	const handleChange =(e)=>{
		console.log("handleChange",e);
		combobox.push(e)
		localStorage.setItem("editNot",'false')
	}
	const onDeselect =(e)=>{
		for(let i=0;i<combobox.length;i++){
			if(e == combobox[i]){
				combobox.splice(i, 1);
			}
		}
		localStorage.setItem("editNot",'false')
		console.log("+",combobox)
	}

	const onChangeUserName =(e)=>{
		this.setState({
			mynameInput:e.target.value,
			name:e.target.value.length >0 ?false:true
		})
		localStorage.setItem("editNot",'false')
	}
	const SwitchCke=(e)=>{
		this.setState({
			checked:e
		})
		localStorage.setItem("editNot",'false')
	}
	  let xin
    let RowArray = []
    for(xin in alluserlist.rolePerMap){
      let RowA = []
			let ItmeArray =[]
      for(let i = 0;i<alluserlist.rolePerMap[xin].length;i++){
				RowA.push(<Option key={alluserlist.rolePerMap[xin][i].displayName}>{alluserlist.rolePerMap[xin][i].displayName}</Option>)
				if(alluserlist.rolePerMap[xin][i].checked){
					ItmeArray.push(alluserlist.rolePerMap[xin][i].displayName)
					combobox.push(alluserlist.rolePerMap[xin][i].displayName)
				}
			}
			RowArray.push(
			<tr>
				<td className={styles.tealeTr}>{xin}</td>

				<td className={styles.tealeTrl}>
					<Select multiple
						style={{ width: '100%' }}
						defaultValue={ItmeArray} 
						onSelect={handleChange}
						onDeselect={onDeselect}
						>
						{RowA}
					</Select>
				</td>
			</tr>
			)
    }
const Rowstyle={marginLeft:10,marginBottom:5}
const Colstyle ={
	marginBottom:30,marginLeft:10
}
const styleName={
		marginBottom:12,marginLeft:10,
		display: this.state.name?'block':'none'
}
const styleinput={
		marginBottom:this.state.name?0:30,
		marginLeft:10,
}
    return (
			<div>
			<div className={styles.filterTop}>
        <div className={styles.title}><span style={{marginRight:20}}>{roleTitle}</span><Button type="primary" onClick={handleSubmit}>保存</Button></div>
        <div className={styles.Searchright}>
          <Icon type="close" onClick={onClose} style={{ fontSize: 24,marginTop:17, color: '#000',cursor: 'pointer',fontWeight:'bold' }} />
        </div>
      </div>
      <div  className={styles.userInfobx}>
	       {/*<Form onSubmit={handleSubmit} >
		        <FormItem
		          label="姓名"
		          labelCol={{ span:24 }}
		          wrapperCol={{ span: 24 }}
							style={{marginLeft:10}}
		        >
								{getFieldDecorator('name', {
									initialValue:editdatarole.name,
		            rules: [{ required: true, message: '请输入姓名!' }],
		          })(
		            <Input onChange={pullout} />
		          )}
		        </FormItem>
						<FormItem
						label="状态"
						labelCol={{ span:24}}
		        wrapperCol={{ span: 24 }}
						style={{marginLeft:10}}
					>
						{getFieldDecorator('switch',{valuePropName: 'checked',initialValue:true})(
							<Switch checkedChildren="禁止" unCheckedChildren="激活" onChange={onChangeswitch}/>
						)}
					</FormItem>
					<FormItem
							label="权限设置"
							labelCol={{ span:24}}
		        	wrapperCol={{ span: 24 }}
							style={{marginLeft:10,textAlign:"left"}}
						>
							{getFieldDecorator('Checkbox',{valuePropName: 'checked'
							})(
										<div>
											<Table 
												columns={columns}
            						dataSource={dataSource}
											  />
										</div>
							)}
						</FormItem>
		     </Form>*/}
				 <Row style={Rowstyle}>
					 <Col span={1}>角色名称<a style={{color:'red'}}>*</a></Col>
				 </Row>
				 <Row style={styleinput}>
					 	<Col span={4}><Input defaultValue={editdatarole.name} onChange={onChangeUserName} placeholder="输入姓名" /></Col>
				 </Row>
				 <Row style={styleName}>
					 	<Col style={{color:'red'}}>用户名不能为空</Col>
				 </Row>
				 <Row style={Rowstyle}>
						<Col span={1} >状态</Col>
				 </Row>
				 <Row style={Colstyle}>
						<Col span={4} style={{lineHeight:'28px'}}><Switch checkedChildren="停用" onChange={SwitchCke} unCheckedChildren="激活" defaultChecked={true}/></Col>
				 </Row>
				 <Row style={Rowstyle}>
				 		<Col span={1}>权限设置</Col>
				 </Row>
				 <Row style={Colstyle}>
						<Row className={styles.tealeBor}>
						 		<table className={styles.tatleHeader} style={{width:'100%'}}>
									 <tr>
										 <th className={styles.tealeTr} >模块名</th>
										 <th className={styles.tealeTrl}>权限名</th>
									 </tr>
									{RowArray}
								</table>
						</Row>
				 </Row>
      </div>
      </div>
    );
  }
}


export default Form.create()(role)
